<template>
    <div class="wrap">
        <Row>
            <i-col class="wrap-left" :lg="{ span: 17}">
                <div>
                    <p>
                        <Icon type="ios-clock-outline"/>
                        <span>事件统计</span>
                    </p>
                </div>
                <ve-waterfall class="sss" :data="chartData1" :settings="chartSettings" style="width:85%"></ve-waterfall>
            </i-col>
            <i-col class="wrap-right" :lg="{ span: 6 }">
                <div>
                    <p>
                        <Icon type="ios-color-fill-outline"/>
                        <span>语言排行</span>
                    </p>
                </div>
                <ve-pie :data="chartData2" style="width:85%"></ve-pie>
            </i-col>
        </Row>
    </div>
</template>

<script>
export default {
    name: 'HomeCenter',
    data() {
        this.chartSettings = {
            dimension: '活动',
            metrics: '时间'
        };
        return {
            chartData1: {
                columns: ['活动', '时间'],
                rows: [{ 活动: '吃饭', 时间: 4 }, { 活动: '睡觉', 时间: 10 }, { 活动: '打豆豆', 时间: 5 }]
            },
            chartData2: {
                columns: ['日期', '访问用户'],
                rows: [
                    { 日期: 'php', 访问用户: 1393 },
                    { 日期: 'java', 访问用户: 3530 },
                    { 日期: '.net', 访问用户: 2923 },
                    { 日期: 'javascript', 访问用户: 1723 },
                    { 日期: 'golang', 访问用户: 3792 },
                    { 日期: '安卓', 访问用户: 4593 }
                ]
            }
        };
    }
};
</script>

<style lang="less" scoped>
.wrap-left,
.wrap-right {
    background: #fff;
    margin-top: 10px;
    border: 1px solid #ddd;
    overflow: hidden;
    padding-top: 10px;
    p {
        padding-left: 20px;
        border-bottom: 1px solid #ddd;
        height: 30px;
        font-size: 13px;
        span {
            margin-left: 10px;
        }
    }
}
.wrap-right {
    margin-left: 2%;
}
</style>
